<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <title></title>
</head>
<body class="container-fluid"><br>

    <div id="app">
        <pupop></pupop>
        <br>
        <tool></tool>
    </div>

    <template id="tem1">
        <div>
            <button @click="toggle()">显示/隐藏</button>
            <div v-show="vis">
                <h3>title</h3>
                <p>你不知道的事情还是有很多的呢！</p>
                <button @click="hide()">×</button>
            </div>
        </div>
    </template>

    <template id="tem2">
        <div>
            <button v-on="{mouseenter: show, mouseleave: hide}">覆盖</button>
            <div v-show="vis">
                <h3>火车王</h3>
            </div>
        </div>
    </template>





    <script src="js/vue.js" ></script>
    <script>

        // 混合（公用的）
        var base = {
            data: function () {
                return {
                    vis: false
                }
            },
            methods: {
                hide: function () {
                    this.vis = false
                }
            }
        }

        Vue.component('pupop',{
            template: '#tem1',
            mixins: [base],
            // 如果本体内有相同的方法，会把混合的属性覆盖
            methods: {
                toggle: function(){
                    this.vis = !this.vis;
                }
            }
        });

        Vue.component('tool',{
            template: '#tem2',
            mixins: [base],
            methods: {
                show: function () {
                    this.vis = true
                }
            }
        });

        var vm = new Vue({
            el: '#app',
            data: {

            }
        });

    </script>
</body>
</html>
